<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>IE6 背景闪烁的问题</title>
        <style>
            .wnt_l.w26_l {
                background-image: url(img/smallWeatherIcon1.png);
                background-position: -48px -48px;
            }
            .db{
                display: block;
            }
            .wea_l, .wnt_l {
                width: 24px;
                height: 24px;
                background-repeat: no-repeat;
                background-position: center;
            }
            .wea_l.w11_l, .wnt_l.w11_l {
                background-image: url(img/smallWeatherIcon1.png);
                background-position: -72px -24px;
            }
            .link{
                background-image: url(img/smallWeatherIcon1.png);
                background-position: -48px -48px;
            }
            .link:hover{
                background-position: -72px -24px;
            }
        </style>
    </head>
    <body>
        <h1>IE6 背景闪烁的问题</h1>
        <p>问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载</p>
        <p>解决：可以用 JavaScript 设置 ie6 缓存这些图片：</p>
        <p>document.execCommand("BackgroundImageCache", false, true);</p>
        <a href="mailto:joe@example.com?subject=feedback" class="link wea_l db">
        </a>
        <div>多看书，多交流，做好准备</div>
        <script>
            document.execCommand("BackgroundImageCache",false,true)
        </script>
    </body>
</html>